@import 'mixins_and_variables_and_functions';

@mixin inset-border-1-red-500($important: false) {
  box-shadow: inset 0 0 0 $gl-border-size-1 $red-500 if-important($important);
}

.modal-footer {
  @include gl-bg-gray-10;
}

.invalid-dropdown {
  .gl-button.gl-dropdown-toggle {
    @include inset-border-1-red-500;

    &:hover {
      @include inset-border-1-red-500(true);
    }
  }
}

.rotations-modal {
  .gl-card {
    min-width: 75%;
  }

  &.gl-modal .modal-md {
    max-width: 640px;
  }
}

//// Copied from roadmaps.scss - adapted for on-call schedules
$header-item-height: 72px;
$item-height: 40px;
$details-cell-width: 180px;
$timeline-cell-height: 32px;
$timeline-cell-width: 180px;
$border-style: 1px solid var(--gray-100, $gray-100);
$gradient-dark-gray: rgba(0, 0, 0, 0.15);
$gradient-gray: rgba(255, 255, 255, 0.001);
$scroll-top-gradient: linear-gradient(to bottom, $gradient-dark-gray 0%, $gradient-gray 100%);
$scroll-bottom-gradient: linear-gradient(to bottom, $gradient-gray 0%, $gradient-dark-gray 100%);
$column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradient-gray 100%);

.timeline-section {
  z-index: 20;

  .timeline-header-label {
    width: $details-cell-width;
  }

  .timeline-header-item {
    .current-day-indicator-header {
      height: $grid-size;
      width: $grid-size;
      transform: translate(-50%, 50%);
    }

    &:first-of-type {
      .week-item-sublabel .sublabel-value:nth-of-type(7) {
        @include gl-border-r;
      }
    }
  }
}

.list-section .details-cell {
  &::after {
    @include gl-h-full;
    @include gl-content-empty;
    @include gl-absolute;
    @include gl-top-0;
    right: -$grid-size;
    width: $grid-size;
    @include gl-pointer-events-none;
    background: $column-right-gradient;
  }
}

.details-cell,
.timeline-cell {
  height: $item-height;
}

.details-cell {
  width: $details-cell-width;
  z-index: 10;
}

.timeline-cell {
  .current-day-indicator {
    top: -1px;
    width: $gl-spacing-scale-1;
    height: calc(100% + 1px);
  }
}

.rotation-asignee-container {
  overflow-x: clip;
}
